<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.4/css/layui.css" media="all">
    <!--    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>-->
    <script src="https://www.layuicdn.com/layui-v2.5.4/layui.js" charset="utf-8"></script>
    <SCRIPT LANGUAGE=javascript>
        function del(url) {
            var msg = "您真的确定要删除吗？\n\n请确认！";
            if (confirm(msg) == true) {
                window.location = url;
                return true;
            } else {
                return false;
            }
        }

        function changePwd(userId) {
            window.open("/user/jump/update/" + userId, "_blank", 'height=200,width=400,status=yes,top=200,left=400,toolbar=no,menubar=no,location=no')
        }

        function seeLog(userId) {
            window.open("/user/jump/log/" + userId, "_blank", 'height=800,width=1200,status=yes,top=200,left=400,toolbar=no,menubar=no,location=no')
        }
    </SCRIPT>
    <script>
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#test'
                , url: 'http://localhost:8080/user/info'
                , parseData: function (res) { //res 即为原始返回的数据
                    console.log(res.data);
                    console.log(res.data.id);
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.length, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
                , cols:
                    [[
                        {field: 'id', width: 80, title: 'ID'}
                        , {field: 'username', width: 80, title: '用户名'}
                        , {field: 'idNo', width: 80, title: '性别'}
                        , {field: 'workNo', width: 80, title: '城市'}
                    ]]
                , done: function (res, curr, count) {
                    //res接口返回的信息;curr得到当前页码;count得到数据总量
                    console.log(res.data);
                    //单元格合并
                    // layuiRowspan(['id','username','idNo','workNo'],1);//支持数组
                }
            });
        });
    </script>
    <title>管理员</title>
</head>
<body>
<table style="width:70%;" cellpadding="2" cellspacing="0" border="1" bordercolor="#000000">
    <thead>
    <tr>
        <td>姓名</td>
        <td>身份证号</td>
        <td>工号</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <tr th:each="human : ${sysUsers}">
        <td th:text="${human.username}"></td>
        <td th:text="${human.idNo}"></td>
        <td th:text="${human.workNo}"></td>
        <td>
            <a href="#" onclick="del('/user/del/' + this.name)" th:name="${human.id}">删除</a>
            <a href="#" onclick="changePwd(this.name)" th:name="${human.id}">改密码</a>
            <a href="#" onclick="seeLog(this.name)" th:name="${human.id}">查看计算历史</a>
        </td>
    </tr>
    </tbody>
</table>
<table class="pl-list" id="test"></table>


</body>
</html>